<template>
  <div class="detailed-gender-out">
    <div class="detailed-item" id="detailed-population-main">
    </div>
  </div>
</template>

<style scoped>

</style>

<script setup>
import emitter from "@/utils/emitter.js";
import {detailedPopulationEvent} from "@/consts/eventName.js";
import {onMounted} from "vue";
import * as echarts from "echarts";
import {useDetailedStore} from "@/store/useDetailedStore.js";
import theme from "../../../../static/theme/walden.json"

let chartDom
let myChart
let option;

let detailedStore = useDetailedStore()
let data = detailedStore.detailedData.get(detailedPopulationEvent)


onMounted(()=>{
  chartDom = document.getElementById('detailed-population-main');
  myChart = echarts.init(chartDom,theme);
  detailedStore.detailedLoadFlag.set(detailedPopulationEvent,true)

  option = createOption(data)

  option && myChart.setOption(option);
})

emitter.on(detailedPopulationEvent,(value)=>{
  option = createOption(value);
  option && myChart.setOption(option);
})


function createOption(value){
  return {
    title: {
      text: '人口数量(万人)',
      left: 10
    },
    legend:{
      data:['人口数量'],
      right: 10
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '1%',
      right: '1%',
      bottom: '1%',
      top: '23%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: value.xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '人口数量',
        type: 'line',
        stack: 'Total',
        data: value.seriesData
      },
    ]
  };
}
</script>